<template>
	<view class="wallet">
		<image class="top-bg" mode="widthFix" src="/static/wallet/wallet-bg.png"></image>
		<view class="pl-3 pr-3 wallet-wrap">
			<view class="flex justify-between align-center wallet-panel">
				<view class="balance">
					<view class="label"> 可用余额(元)</view>
					<u--text color="#fff" size="50rpx" mode="price" :bold="true" :text="balance"></u--text>
				</view>
				<navigator url="/pages/wallet/walletDetail/walletDetail">
					<u-button class="detail-btn" :hairline="false" text="明细" shape="circle" size="mini"
						color="rgba(255,255,255,0.2)"></u-button>
				</navigator>

			</view>
			<u-grid :border="false" col="2">
				<u-grid-item v-for="(listItem,listIndex) in incomeList" :key="listIndex">
					<view class="flex justify-center align-center direction-column mb-3 income-item "
						:class="'income-' + listIndex">
						<text class="num">{{listItem.num}}</text>
						<text class="title">{{listItem.title}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	import {
		bankDefault
	} from "@/apis/wallet.js";
	export default {
		data() {
			return {
				balance: 0,
				incomeList: [{
						title: '本月提成(元/单)',
						num: '0/0'
					},
					{
						title: '上月提成(元/单)',
						num: '0/0'
					},
					{
						title: '本年提成(元/单)',
						num: '0/0'
					},
					{
						title: '本月返工(元/单)',
						num: '0/0'
					},
				]
			};
		},
		async onLoad() {
			const res = await bankDefault()
			console.log('onLoad bankDefault', res)
			if (res.MsgCode != 0) return
			this.balance = res.data.Balance
			const incomeList = this.incomeList
			incomeList[0].num = `${res.data.WXYJ_CurrentMonth}/${res.data.WXDS_CurrentMonth}`
			incomeList[1].num = `${res.data.WXYJ_PreMonth}/${res.data.WXDS_PreMonth}`
			incomeList[2].num = `${res.data.WXYJ_CurrentYear}/${res.data.WXDS_CurrentYear}`
			incomeList[3].num = `${res.data.FGYJ_FanGong_CurrentMonth}/${res.data.WXDS_FanGong_CurrentMonth}`
			this.incomeList = incomeList
		
		},
	}
</script>

<style lang="scss">
	.wallet {
		.top-bg {
			width: 100%;
			margin-top: -44px;
			z-index: -1;
		}

		.wallet-wrap {
			margin-top: -300rpx;

			.wallet-panel {
				color: #fff;
				margin-bottom: 112rpx;

				.label {
					font-size: 20rpx;
				}

				.value {
					font-size: 50rpx;
					font-weight: bold;
				}
				::v-deep .u-text{
					width: initial;
					.u-text__price{
						display: none;
					}
				}
				.detail-btn {
					width: 100rpx;
					min-width: 100rpx;
					margin: 0;
					height: 50rpx;
					border-width: 0 !important;
				}
			}

			.income-item {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				padding: 32rpx;
				width: 267rpx;

				.title {
					font-size: 26rpx;
					color: #333;
				}

				.num {
					font-size: 30rpx;
					font-weight: bold;
					color: #000;
				}
			}

			.income-0,
			.income-2 {
				margin-right: 15rpx
			}

			.income-1,
			.income-3 {
				margin-left: 15rpx
			}
		}

	}
</style>
